<template>
  <!-- 信修案件 -->
  <section class="page credit-repair-case">
    <data-form :model="searchModel" @onSearch="refreshData" :page="pageService" @handleResetForm="handleResetForm">
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="searchModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="searchModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="searchModel.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="searchModel.overdueDays" :isInteger="true"></number-range>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService" :selectionList.sync="selectionList">
      <template slot="buttons">
        <el-button @click="manualDistruibute" v-auth = "1805">分案</el-button>
      </template>
      <template slot="buttons">
        <el-button @click="downRepairCaseInfos" v-auth = "1806">批量下载案件</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(2)">
          <template slot-scope="scope">
            <el-button type="text" @click="repairObj=scope.row,dialog.repair=true">修复</el-button>
            <el-button type="text" @click="repairObj=scope.row,dialog.viewRecord=true">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <a  @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :formatter="(row)=>$filter.encryptPhone(row.mobileNo)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="area" label="地区" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $city.getInheritNames(Number(row.area))">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="案件金额（元）" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="repairCollectorRealName" label="信修员" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
      </template>
    </data-box>
    <el-dialog title="修复说明" :center="true" :visible.sync="dialog.repair" width="800px">
      <repair-info-upload :id="repairObj.id" @close="dialog.repair=false,viewRepair = false;refreshData()" @success="refreshData" ref="repair-info"></repair-info-upload>
    </el-dialog>
    <!-- 点击分案弹窗 -->
    <el-dialog title="手动分案" :visible.sync="dialog.distrubute" width="1000px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" @open="$nextTick(()=>$refs['user-case-allot'].refreshDept())">
      <case-allot :fromChannel="fromChanel" @refreshList="refreshData" ref="user-case-allot" @close="dialog.distrubute=false;refreshData()"></case-allot>
    </el-dialog>
    <!--修复信息查看-->
    <el-dialog title="修复纪录" :center="true" :visible.sync="dialog.viewRecord" width="800px" @open="$nextTick(() => $refs['viewRecord'].queryInfo(repairObj.id))">
      <fix-info ref="viewRecord"> </fix-info>
      <div class ="operate-buttons">
        <el-button @click="dialog.viewRecord=false">关闭</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script lang="ts"> 
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';
import { RoleService } from '~/services/management-service/role.service';
import { PageService } from '~/utils/page.service';
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import NumberRange from "~/components/common/number-range.vue";
import { RepairCasesService } from "~/services/domain-service/repair-cases.service";
import RepairInfoUpload from "~/components/common-manages/credit-repair-case/repair-info-upload.vue"
import RepairCaseDistrubute from "~/components/common-manages/credit-repair-case/repair-case-distrubute.vue";
import FixInfo from "~/components/collection-execution/collection-case-info/fix-info.vue"
import CaseAllot from "~/components/distribution-common/case-allot.vue";
import { CASE_CHANNEL } from '~/config/enum.config';
import { namespace, Getter, Mutation } from 'vuex-class';
import { OpenExecutionData } from "~/config/types";
const CollectionExecutionModule = namespace("collection-execution");
const AllotModule = namespace('case-allot');

@Layout('workspace')
@Component({
  components: {
    DataForm,
    DataBox,
    NumberRange,
    RepairInfoUpload,
    RepairCaseDistrubute,
    CaseAllot,
    FixInfo
  },
})
export default class CreditRepairCase extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(RepairCasesService) private repairCasesService: RepairCasesService;
  @AllotModule.Mutation
  private updateCaseIds;
  @CollectionExecutionModule.Action
  private openCollectionExecution;
  
  private fromChanel = CASE_CHANNEL.CREDIT_REPAIR;
  private searchModel: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    overduePeriod: "",
    overdueDays: {
      min: "",
      max: ""
    }
  }

  private robberyCaseTrue: boolean = false
  private repairObj: any = {};
  private dialog: any = {
    repair: false,
    distrubute: false,
    viewRecord: false
  }
  private dataSet: any[] = [];
  private selectionList: any[] = [];

  private refreshData() {
    this.selectionList = []
    this.repairCasesService.repairCasesQuery(this.searchModel, this.pageService).subscribe(
      data => {
        this.dataSet = data
        if(this.dataSet){
          this.dataSet.forEach(x=>{
            x.overduePeriod>12?x.overduePeriod = 'M12+':x.overduePeriod = 'M'+x.overduePeriod
          })
        }
      }
    )
  }

  private activated() {
    this.refreshData()
  }

  private mounted() {
    this.refreshData()
  }

  /**
   * 范围框输入重置
   */
  private handleResetForm() {
    this.searchModel.overdueDays = { min: '', max: '' }
  }

  /**
   * 分案
   */
  private manualDistruibute() {
    if (this.selectionList.length === 0) {
      this.$message.info('请选择要分配的案件');
      return;
    }
    this.updateCaseIds(this.selectionList.map((v) => v.id));
    this.dialog.distrubute = true;
  }

  /**
   * 批量下载修复案件
   */
  private downRepairCaseInfos() {
    const params: any = {
      ...this.searchModel,
    }
    if (this.selectionList.length !== 0) {
      params.caseIds = this.selectionList.map((v) => v.id).join(',')
    }
     this.repairCasesService.downRepairCaseInfos(params).subscribe(
      data => this.$common.downloadFile(data.url)
      // data => console.log(data)
    )
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.openCollectionExecution(
      new OpenExecutionData(row.id, row.caseNumber, CASE_CHANNEL.CREDIT_REPAIR,false,true)
    );
  }

}
</script>

<style lang="less">
</style>
